<template>
  <div class="hp100">
    <el-container class="hp100">
      <el-aside width="200px" class="aside">
        <div class="logo">
          <img src="../assets/img/logo.png">
        </div>
        <el-menu default-active="0" class="el-menu-vertical-demo">
          <el-menu-item :index="j+''" v-for="(item,j) in menuList" :key="j+''" @click="showMenu(item)">
            <i class="el-icon-menu"></i>
            <span slot="title">{{item.name}}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header class="header" height="66px">
          <img class="portrait" :src="httpImgUrl+personInfo.url">
          <span>{{personInfo.username}}</span>
          <i class="iconfont icon-guanbi" @click="logout()"></i>
        </el-header>
        <el-main class="main">
          <p class="tiptxt">{{currentMenu}}</p>
          <div class="maincontent">
            <router-view ></router-view>
          </div>
        </el-main>
      </el-container>
  </el-container>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      menuList:[],
      currentMenu:'合作模式',
      sysUser:''
    }
  },
  methods:{
    showMenu(data){
      this.currentMenu=data.name;
      this.$router.push({ path: '/home/'+data.url })
    },
    logout(){
          this.$confirm('确定要注销吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {       
          localStorage.removeItem('token');
          localStorage.removeItem('userId');
          localStorage.removeItem('personInfo');
          this.$router.push({path:'/'})
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
    },
    getRows(){
      this.$http.get(this.$store.state.httpApi + 'sysPermission/all?sysUserId='+this.personInfo.id).then(response =>{
          if(response.status == 200){
          this.menuList=response.data.data;
          this.currentMenu=this.menuList[0].name;
          this.$router.push({ path: '/home/'+this.menuList[0].url });
          console.log(this.selectData);
          }else{
            console.log('接口返回失败!',response);
          }
          },response => {
            console.log('请求失败',response)
          })
       }
    },
    created(){
      this.getRows();
    } ,
    computed: {
      httpImgUrl(){
          return this.$store.state.httpImgUrl
      },
      personInfo(){
        if(JSON.parse(localStorage.getItem('personInfo')) == null){
          this.$router.push({ path: '/'});
        }else{
         return JSON.parse(localStorage.getItem('personInfo')); 
        }
         
      }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import './../assets/css/base.less';
.header{
  //.h(66px); 
  background:#EBEBEB;
  box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.2) ;
  padding-right:44px;
  display:flex;
  justify-content: flex-end;
  padding:10px 44px 10px 0;
}
.icon-guanbi{
  line-height:46px;
  margin-left:20px;
  color:#BBBBBB;
  cursor:pointer;
}
.logo{
  height:66px;
  background-color:#B79267;
  padding:10px 0;
  box-sizing:border-box;
  position:relative;
  margin-bottom: 20px;
}
.logo img{
  display:block;
  margin:0 auto;
  width:130px;
  height:46px;
}
.portrait{
  width:46px;
  height:46px;
  border-radius:23px;
  margin-right:10px;
}
.header span{
  line-height:46px;
}
.logo:after{
  content:'';
  height:20px;
  background:#2E2223;
  display:block;
  position:absolute;
  bottom:-20px;
  width:100%;
}
.aside{
  height:100%;
  background:#32312F;
}
.el-menu{
  background:#32312F;
}
.main{
  padding:62px 44px 46px 42px;
  background-color:#F7F7F7;
  position:relative;
}
.maincontent{
  background:rgba(255,255,255,1);
  box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.09);
  position: absolute;
  /* width: 100%; */
  top: 62px;
  bottom: 42px;
  left: 46px;
  right: 44px;
  padding:40px;
  overflow: auto;
}
.tiptxt{
  position:absolute;
  top:0;
  line-height:62px;
}
</style>
